<template>
  <div>
    <div class="rankingTable">
      <div class="title">
        <span class="text">{{ title }}<span style="float:right;color: #f00;">{{tableList.length}}记录</span></span>
      </div>
      <div class="rankingTableList" ref="tableBox" :style="{ width, height: itemHeight * numPage +'px' }">
        <div class="rankingTableListBox" :style="{ height: itemHeight + 'px' }" v-for="(item, index) in tableList" :key="index">
          <div class="boxName">{{ item.updateBy }} - {{ item.createBy }} </div>
          <div class="rectangularStrip">
            <div class="rectangle1" :style="{ width: item.percentage }"></div>
            <div class="rectangle2"></div>
          </div>
          <div class="boxNumber">{{ item.countYongjinzonge }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let timer = null
export default {
  props: { tableList: Array, speed: Number, width: String, height: String,title: String, numPage: Number, itemHeight: Number },
  data() {
    return {
      numPage: 0,
      tableListData:[]
    }
  },
  watch: {
    tableList: {
      deep: true,
      handler(val) {
        this.initData(val);
      }
    }
  },
  destroyed () {
    clearInterval(timer)
  },
  created () {
    this.initData(this.tableList);
  },
  methods: {
    initData(tableList){
      this.tableListData = tableList;
      this.numPage = this.tableListData.length;
      // 此处为了实现无缝滚动需要复制第一页的数据
      if (this.tableListData.length > this.numPage) {
        const tableListData = this.tableListData.slice(0, this.numPage, 1)
        // eslint-disable-next-line vue/no-mutating-props
        this.tableListData = this.tableListData.concat(tableListData)
      }
    }
  },
  mounted () {
    if (this.tableList.length > this.numPage) {
      let i = 0
      timer = setInterval(() => {
        this.$refs.tableBox.scrollTo({
          top: i * this.itemHeight,
          behavior: 'smooth' // 添加这个参数可以实现平滑滚动
        })
        i++
        if (i > this.tableList.length - (this.numPage - 1)) {
          i = 2
          this.$refs.tableBox.scrollTo({
            top: 0 * this.itemHeight
          })
          this.$refs.tableBox.scrollTo({
            top: 1 * this.itemHeight,
            behavior: 'smooth' // 添加这个参数可以实现平滑滚动
          })
        }
      }, this.speed)
    }
  }
}
</script>
<style scoped lang="scss">
.rankingTable {
  margin-top: 16px;
}

.rankingTableList {
  margin-top: 2px;
  background:#304156;
  overflow: hidden;

}

.rankingTableListBox {
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  box-sizing: border-box;

}

.boxName {
  width: 120px;
  margin-left: 16px;
  color: white;
  font-weight: 800;
  font-size: 14px;
}

.rectangularStrip {
  margin-left: 12px;
  margin-right: 8px;
  display: flex;
  align-items: center;
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 8px 8px 8px 8px;
  opacity: 1;

}

.rectangle1 {
  height: 4px;
  background: linear-gradient(270deg, #EE7827 0%, rgba(238, 120, 39, 0) 100%);
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
}

.rectangle2 {
  width: 5px;
  height: 15px;
  background-color: #EE7827;
  transform: skew(-211deg);
  border-radius: 1px 1px 1px 1px;
  opacity: 1;
}

.boxNumber {
  width: 60px;
  margin-right: 10px;
  font-size: 14px;
  font-weight: 400;
  color: white;
}
</style>
